<template>
  <view class="main">
    <u-navbar title="课程考勤" :autoBack="true"> </u-navbar>
    <view class="btn-group">
      <view class="u-flex u-flex-col u-row-center u-col-center" v-for="(item, index) in tabList" :key="index"
        @click="tabIndex = index">
        <view class="u-font-32 u-m-b-30" :style="{ color: tabIndex == index ? '#C4AD8C' : '#000' }">
          {{ item.name }}
        </view>
        <view v-show="tabIndex == index" style="
            width: 40px;
            height: 5px;
            background-color: #c4ad8c;
            border-radius: 3px;
          ">
        </view>
      </view>
    </view>

    <view class="u-p-t-30 u-p-l-40 u-flex text-black" v-if="tabIndex == 0">
      <!-- <view class="u-m-r-30">第一周</view> -->
      <view>{{ today }}</view>
    </view>

    <view class="collapse u-p-30" v-if="tabIndex == 0">
      <view class="bg-white u-p-30 list-item" :class="{'u-m-t-30':index>0}" v-for="(item,index) in todayList"
        :key="item.id" @click="toDetail(item)">
        <view class="u-flex u-row-between u-p-b-20">
          <text class="text-blue">{{item.subjectStatus==1?'未开始':item.subjectStatus==2?'进行中':'已结束'}}</text>
          <u-icon name="arrow-right"></u-icon>
        </view>

        <view class="u-border-top">
          <view class="u-m-t-30">
            <text class="text-tips u-m-r-30">所属学院:</text>
            <text>{{ item.collegeName }}</text>
          </view>
          <view class="u-m-t-30">
            <text class="text-tips u-m-r-30">所在班级:</text>
            <text>{{ item.className }}</text>
          </view>
          <view class="u-m-t-30">
            <text class="text-tips u-m-r-30">课程名称:</text>
            <text>{{ item.subjectName }}</text>
          </view>
          <view class="u-m-t-30">
            <text class="text-tips u-m-r-30">任课老师:</text>
            <text>{{ item.teacherName }}</text>
          </view>
          <view class="u-m-t-30">
            <text class="text-tips u-m-r-30">上课基准打卡:</text>
            <text>{{ item.subjectBeginTime }}</text>
          </view>
          <view class="u-m-t-30">
            <text class="text-tips u-m-r-30">下课基准打卡:</text>
            <text>{{ item.subjectEndTime }}</text>
          </view>
        </view>

      </view>
    </view>

    <view class="u-p-b-30" v-if="tabIndex == 1">

      <!-- 查询条件 -->
      <view class="u-flex u-row-between u-col-center bg-white" style="padding:10px;">
        <view style="margin-right: 5px;" @click="showClockTime = true">
          <u-input v-model="clockTimeText" readonly placeholder="选择时间">
            <template slot="suffix">
              <u-icon name="arrow-down"></u-icon>
            </template>
          </u-input>
        </view>
        <view style="margin-right: 5px;" @click="statusShow = true">
          <u-input v-model="clockStatusText" readonly placeholder="选择打卡状态">
            <template slot="suffix">
              <u-icon name="arrow-down"></u-icon>
            </template>
          </u-input>
        </view>

        <view>
          <u-button type="primary"
            customStyle="background:#182044;color:#C4AD8C;border-radius:7px;padding:17px;border:none;" size="small"
            text="重置" @click="reset"></u-button>
          <u-button type="primary"
            customStyle="background:#182044;color:#C4AD8C;border-radius:7px;padding:17px;border:none;margin-top:10rpx"
            size="small" text="查询" @click="refresh"></u-button>
        </view>

      </view>

      <view class="logInfo u-border-radius" v-for="(item, index) in clockList" :key="index">
        <view>课程：<text>{{ item.subjectName }}</text></view>
        <view>打卡时间：<text>{{ item.clockTime }}</text></view>
        <view>打卡地点：<text>{{ item.address }}</text></view>
      </view>
    </view>
    <!--  -->
    <u-picker :show="statusShow" :columns="[clockStatusList]" keyName="label" @confirm="confirmClockStatus"></u-picker>
    <u-calendar :show="showClockTime" monthNum="13" mode="range" :maxDate="maxDate" :minDate="minDate" @confirm="confirmClockTime"
    @close="showClockTime=false"></u-calendar>
  </view>
</template>

<script>
  import {
    mapState,
    mapGetters
  } from "vuex";
  import {
    getStudentClockList,
    getTeacherClockList,
    getTodayStudySubject,
    getTodayClassTimetable,
  } from "@/api/user.js";
  export default {
    data() {
      return {
        openList: ["clock"],
        tabIndex: 0,
        tabList: [{
            name: "今日课程",
          },
          {
            name: "考勤记录",
          },
        ],
        btnType1: "primary",
        btnType2: "",
        query: {
          pageNo: 1,
          pageSize: 10,
          'clockTime%5B0%5D': '',
          'clockTime%5B1%5D': '',
          clockStatus: ''
        },
        isLast: false,
        clockList: [],
        todayList: [],
        statusShow: false,
        showClockTime: false,
        clockStatusList: [],
        clockStatusText: '',
        clockTimeText:''
      };
    },
    computed: {
      ...mapState(["userInfo", "userType", "userId", 'dictDataList']),
      today() {
        return this.$u.timeFormat(+new Date(), 'yyyy-mm-dd');
      },
      week() {
        let wk = new Date().getDay();
        return wk ? wk : 7;
      },
      minDate() {
        return +new Date() - 31536000000
      },
      maxDate() {
        return +new Date() + 1000;
      }
    },
    watch: {
      tabIndex(val) {
        if (val == 0) {
          this.getTodayClock();
        } else {
          this.refresh();
        }
      },
    },
    onLoad() {
      this.clockStatusList = this.dictDataList.filter(item => item.dictType === 'accommodation_clock_status');
    },
    onShow() {
      this.getTodayClock();
    },
    onReachBottom() {
      // this.loadMore()
    },
    methods: {
      getTodayClock() {
        if (this.userType == 3) {
          getTodayClassTimetable({
            teacherId: this.userId,
            weekId: this.week
          }).then((res) => {
            this.todayList = res.data;
          });
        } else if (this.userType == 4) {
          getTodayStudySubject({
            classesId: this.userInfo.classesId,
            weekId: this.week
          }).then((res) => {
            console.log("res", res);
            this.todayList = res.data;
          });
        }
      },
      confirmClockStatus(e) {
        this.query.clockStatus = e.value[0].value;
        this.clockStatusText = e.value[0].label;
        this.statusShow = false;
        this.refresh()
      },
      confirmClockTime(e){
        console.log(e)
        let startTime = e[0]+' 00:00:00';
        let endTime = e[e.length-1] + ' 23:59:59';
        this.query['clockTime%5B0%5D'] = encodeURIComponent(startTime);
        this.query['clockTime%5B1%5D'] = encodeURIComponent(endTime);
        this.clockTimeText = startTime+' - '+endTime;
        this.showClockTime = false;
        this.refresh()
      },
      reset() {
        this.query = {
          clockStatus: '',
          'clockTime%5B0%5D': '',
          'clockTime%5B1%5D':'',
          pageNo: 1,
          pageSize: 10,
        }
        this.clockStatusText = '';
        this.clockTimeText = '';
        this.refresh()
      },
      refresh() {
        this.query.pageNo = 1;
        this.clockList = [];
        this.isLast = false;
        this.getList();
      },
      getList() {
        if (this.isLast) return;
        if (this.userType == 3) {
          getTeacherClockList(uni.$u.queryParams({
            ...this.query,
            clockUserId: this.userId
          })).then((res) => {
            this.clockList = this.clockList.concat(res.data.list);
            this.query.pageNo++;
            if (this.clockList.length == res.data.total) {
              this.isLast = true;
            }
          });
        } else if (this.userType == 4) {
          getStudentClockList(uni.$u.queryParams({
            ...this.query,
            clockUserId: this.userId
          })).then((res) => {
            console.log("res", res);
            this.clockList = this.clockList.concat(res.data.list);
            this.query.pageNo++;
            if (this.clockList.length == res.data.total) {
              this.isLast = true;
            }
          });
        }
      },
      tabChange(e) {
        console.log(e);
      },
      open(e) {
        // console.log('open', e)
      },
      close(e) {
        // console.log('close', e)
      },
      change(e) {
        // console.log('change', e)
      },
      btnClick(flag) {
        if (flag == 1) {
          this.btnType1 = "primary";
          this.btnType2 = "default";
          return;
        }
        this.btnType1 = "default";
        this.btnType2 = "primary";
      },
      toDetail(item) {
        let query = {
          id: item.id,
          sId: item.subjectId,
          cId: item.classesId,
          rId: item.roomId,
          tn: item.teacherName,
          cn: item.className,
          sn: item.subjectName,
          wId: item.weekId,
          stId: item.studyTimeId,
          cen: item.collegeName,
          st: item.subjectBeginTime,
          se: item.subjectEndTime,
          ad:item.address
        };
        uni.navigateTo({
          url: "/pages/user/courseDetail" + uni.$u.queryParams(query),
        });
      },
    },
  };
</script>

<style>
  page {
    background-color: #f8fafb;
  }
</style>
<style lang="scss" scoped>
  .main {
    .logInfo {
      margin: 30rpx;
      background-color: #fff;
      padding: 30rpx;

      text {
        color: #999999;
        width: 100%;
        // white-space: nowrap;
      }

      view {
        margin: 10px;
      }
    }

    .list-item {
      border-radius: 15rpx;
    }
  }

  .btn-group {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 44px;
    padding: 10px 10px;
    background-color: #fff;

    .btn {
      width: 45%;
    }
  }

  ::v-deep .u-reset-button::after {
    border: 1px solid #ccc;
  }
</style>
